<template>
	<view class="recommend-list-box" :style="{'height': `calc(100% - 100rpx - ${safeBottom}px)`}">
		<scroll-view class="recommend-list" scroll-y="true">
			<view class="content-box">
				<view class="left-box">
					<recommend-item :activity="activity" v-for="activity of leftList" :pushData="makeList"></recommend-item>
				</view>
				<view class="right-box">
					<recommend-item :activity="activity" v-for="activity of rightList" :pushData="makeList"></recommend-item>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
			<uni-load-more status="noMore"></uni-load-more>
			<view style="height: 60rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import recommendItem from '@/components/recommendItem.vue'
	
	export default {
		name:"recommendList",
		data() {
			return {
				pageNum: 1,
				safeBottom: 0,
				leftList: [],
				rightList: [],
				dataList: []
			};
		},
		components: {
			recommendItem
		},
		mounted() {
			this.safeBottom = this.$safeBottom;
			this.getRecommendActivities('refresh');
			uni.$on('listLikeActivity', (activity) => {
				let index = this.leftList.findIndex(item => item === activity);
				if (index !== -1) {
					this.leftList[index].isLike = true;
					this.leftList[index].likeNum += 1;
				}
				index = this.rightList.findIndex(item => item === activity);
				if (index !== -1) {
					this.rightList[index].isLike = true;
					this.rightList[index].likeNum += 1;
				}
			})
		},
		methods: {
			getRecommendActivities(type) {
				const params = {
					pageSize: 50,
					pageNum: this.pageNum
				}
				this.$apis.getRecommendActivity(params).then(res => {
					if (res.code === 0) {
						if (type === 'refresh') {
							this.leftList = [];
							this.rightList = [];
						}
						this.dataList = res.data.list;
						this.makeList();
					}
				});
			},
			makeList() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.left-box').boundingClientRect();
				query.selectAll('.right-box').boundingClientRect();
				if (this.dataList.length > 0) {
					query.exec(res => {
						let leftHeight = res[0].length != 0 ? res[0][0].height : 0;
						let rightHeight = res[1].length != 0 ? res[1][0].height : 0;
						if (leftHeight === rightHeight || leftHeight < rightHeight) {
							this.leftList.push(this.dataList.shift());
						} else {
							this.rightList.push(this.dataList.shift());
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.recommend-list-box {
		width: 100%;
		
		.recommend-list {
			width: 100%;
			height: 100%;
			
			.content-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding-top: 32rpx;
				
				.left-box {
					width: 328rpx;
					margin-left: 32rpx;
				}
				
				.right-box {
					width: 328rpx;
					margin-right: 32rpx;
				}
			}
		}
	}
</style>